/*人联核验*/
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:frametrim/utility/sq_color.dart';
import 'package:frametrim/views/appbar_black.dart';
import 'package:frametrim/views/button_circle.dart';
import 'package:image_picker/image_picker.dart';

class FaceCheckPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => FacrCheckState();
}

class FacrCheckState extends State<FaceCheckPage> {
  //关于拍照
  final ImagePicker _picker = ImagePicker();
  List<XFile>? _imageFileList;
  dynamic _pickImageError;

  set _imageFile(XFile? value) {
    _imageFileList = value == null ? null : <XFile>[value];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion(
        value: SystemUiOverlayStyle.dark,
        child: Stack(
          children: <Widget>[
            /*Image.asset('image/background.png',
                fit: BoxFit.cover,
                width: Screen.width,
                height: Screen.height),*/
            Container(
              color: SQColor.white,
              child: Column(
                children: <Widget>[
                  AppbarCenterTitle(
                    title: '人脸核验',
                    imgStr: 'image/imv_back.png',
                    titleColor: SQColor.black,
                  ),
                  buildBody(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildBody() {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 40,
        ),
        Text(
          '拍摄您本人人脸，请确保正对手机，光线充足',
          style: TextStyle(fontSize: 16, color: SQColor.color_666666),
        ),
        SizedBox(
          height: 35,
        ),
        GestureDetector(
          onTap: () {
            _imageFileList != null ? _previewImages() :_takePhoto();
          },
          child: _imageFileList != null
              ? Image.file(File(_imageFileList![0].path), width: 280,
            height: 340,)
              : Image.asset(
                  'image/face_frame.png',
                  width: 280,
                  height: 340,
                ),
        ),
        SizedBox(
          height: 15,
        ),
        ButtonCircleView(
            '拍照，提交认证', SQColor.white, SQColor.color_3C64F9, _takePhoto),
      ],
    );
  }

  void submit() {}

  /*拍照*/
  _takePhoto() async {
    try {
      final XFile? pickedFile = await _picker.pickImage(
        source: ImageSource.camera,
      );
      setState(() {
        _imageFile = pickedFile;
      });
    } catch (e) {
      setState(() {
        _pickImageError = e;
      });
    }
  }

  /*预览图片*/
  Widget _previewImages() {
    if (_imageFileList != null) {
      return Semantics(
          child: ListView.builder(
            key: UniqueKey(),
            itemBuilder: (BuildContext context, int index) {
              // Why network for web?
              // See https://pub.dev/packages/image_picker#getting-ready-for-the-web-platform
              return Semantics(
                label: 'image_picker_example_picked_image',
                child: kIsWeb
                    ? Image.network(_imageFileList![index].path)
                    : Image.file(File(_imageFileList![index].path)),
              );
            },
            itemCount: _imageFileList!.length,
          ),
          label: 'image_picker_example_picked_images');
    } else if (_pickImageError != null) {
      return Text(
        'Pick image error: $_pickImageError',
        textAlign: TextAlign.center,
      );
    } else {
      return const Text(
        'You have not yet picked an image.',
        textAlign: TextAlign.center,
      );
    }
  }
}
